<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-09-15 14:19:27
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2022-09-26 11:18:57
 * @FilePath: \robot\src\views\patroling\PatrolingAside.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="h-full w-full relative">
    <div
      class="bg-gradient-to-r from-[#0d456e] to-[#001d36] h-full flex items-center justify-center text-white cursor-pointer select-none border-0"
      @click="toggleCollapse"
    >
      <component :is="collapseIcon"></component>
    </div>
  </div>
</template>
<script setup>
import { toRefs, computed } from "vue";
import ArrowLeft from "@/icons/patroling/arrow_l.svg";
import ArrowRight from "@/icons/patroling/arrow_r.svg";

const props = defineProps({
  isCollapse: {
    type: Boolean,
    required: true,
  },
});
const { isCollapse } = toRefs(props);
const emit = defineEmits(["update:isCollapse"]);

const collapseIcon = computed(() => {
  return isCollapse.value ? ArrowLeft : ArrowRight;
});

function toggleCollapse() {
  emit("update:isCollapse", !isCollapse.value);
}
</script>
